<template>
  <div class="inpatient_deposit_billing_container">
    <div class="base_info_container">
      <div class="grey_title_container">
        <span class="indicator"></span>
        <span class="text">基本信息</span>
      </div>
      <div class="base_info_content_container form_container">
        <el-row :gutter="30">
          <el-col :span="4" class="item">
            <div class="text_container">
              <span class="require">*</span>
              <span class="text">姓名:</span>
            </div>
            <el-input size="mini"></el-input>
          </el-col>
          <el-col :span="5" class="item">
            <div class="text_container">
              <span class="require">*</span>
              <span class="text">电话:</span>
            </div>
            <el-input size="mini"></el-input>
          </el-col>
          <el-col :span="10" class="item">
            <div class="text_container" style="width: 62px; text-align: right;">
              <span class="require">*</span>
              <span class="text">住院押金:</span>
            </div>
            <el-input size="mini"></el-input>
          </el-col>
        </el-row>
      </div>
    </div>
    <div class="account_info_container">
      <div class="grey_title_container">
        <span class="indicator"></span>
        <span class="text">客户账户信息</span>
      </div>
      <div class="account_info_content_container form_container">
        <el-row :gutter="30">
          <el-col :span="9" class="item">
            <div class="text_container">
              <span class="require">*</span>
              <span class="text">未结算押金总额:</span>
            </div>
            <el-input size="mini"></el-input>
          </el-col>
          <el-col :span="10" class="item">
            <div class="text_container four_text_width">
              <span class="text">备注:</span>
            </div>
            <el-input size="mini"></el-input>
          </el-col>
          <el-col :span="5">
            <el-button type="primary" size="mini" style="padding-left: 26px; padding-right: 26px;">保存</el-button>
            <el-button type="success" size="mini" style="padding-left: 26px; padding-right: 26px;">提交收银</el-button>
          </el-col>
        </el-row>
      </div>
    </div>
    <div class="deposit_container">
      <div class="grey_title_container deposit_header">
        <span class="indicator"></span>
        <span class="text">客户住院押金缴费记录</span>
      </div>
      <div class="deposit_content_container">
        <el-table
          :data="deposits"
          :border="true">
          <el-table-column
            label="编号"
            align="center"
            prop="index"/>
          <el-table-column
            label="缴费日期"
            align="center"
            prop="date"/>
          <el-table-column
            label="缴费金额"
            align="center"
            prop="money"/>
          <el-table-column
            label="单据编号哦"
            align="center"
            prop="no"/>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
  import Vue from 'vue';
  import Component from 'vue-class-component';

  @Component
  export default class InpatientDepositBilling extends Vue {
    deposits = [{
      index: 1,
      date: '2018-01-21',
      money: '150000.00',
      no: 'SHML20171226SF0001'
    }, {
      index: 2,
      date: '2018-01-21',
      money: '150000.00',
      no: 'SHML20171226SF0001'
    }];
  }
</script>

<style scoped>
  .base_info_container {
    border-top: 1px solid #f0f0f0;
    border-left: 1px solid #f0f0f0;
    border-right: 1px solid #f0f0f0;
  }

  .base_info_content_container, .account_info_content_container {
    padding: 15px 10px;
  }

  .account_info_container {
    border-top: 1px solid #f0f0f0;
    border-left: 1px solid #f0f0f0;
    border-right: 1px solid #f0f0f0;
  }

  .deposit_header {
    border-top: 1px solid #f0f0f0;
    border-left: 1px solid #f0f0f0;
    border-right: 1px solid #f0f0f0;
  }
</style>
